<template>
    <el-dialog v-dialog-drag :title="$t('AddLed')" :visible.sync="addLedDialog" width="30%"
               :before-close="handleAddLedClose">
        <el-form ref="ledForm" :model="port" :rules="rules" class="demo-ruleForm" label-width="80px">
            <el-form-item :label="$t('Type')" prop="type" @change="changeSelectLed" required>
                <el-select v-model="port.type" :placeholder="$t('Please_Select')">
                    <el-option
                        v-for="type in ledTypes"
                        :key="type"
                        :value="type">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="$t('Diameter')" prop="radius">
                <el-input v-model="port.radius"></el-input>
            </el-form-item>
            <el-form-item :label="$t('LedNum')" prop="ledNum">
                <el-input v-model="port.ledNum"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="submitForm('ledForm')">{{$t('Confirm')}}</el-button>
            <el-button size="small" @click="handleAddLedClose">{{$t('Cancel')}}</el-button>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        props: {
            addLedDialog: false,
        },
        data: function () {
            return {
                port: {
                    radius: 12,
                    type:"",
                    ledNum:"",
                },
                ledTypes:[
                    "port",
                    "poe",
                    "slot",
                    "sys",
                    "pwr1",
                    "pwr2",
                    "pwr3",
                    "pwr4",
                    "pwr5",
                ],
                rules: {
                    radius: [{required: true, message: this.$t('Please_Input_Diameter')}],
                    type: [{required: true, message: this.$t('Please_Select_Type')}],
                    ledNum: [{required: true, message: this.$t('Please_Input_LedNum')}],
                }
            }


        },
        methods: {
            changeSelectLed(value) {
                let vm = this;
                for(let index  in vm.ledTypes){
                    let item =  vm.ledTypes[index];
                    if (item == value) {
                        vm.port.type = item;
                        return;
                    }
                }
            },
            addLedImg() {
                let vm = this;
                let img = new Image()
                img.src = "./static/img/circle.png";
                img.onload = function () {
                    vm.$parent.addImg(vm.$parent.ledGroup, vm.port.radius, vm.port.radius, img.src, "circle.png", 'led', vm.port.ledNum, vm.port.type);
                    vm.$parent.addLedDialog = false;
                }

            },
            handleAddLedClose(done) {
                this.$parent.addLedDialog = false;
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.addLedImg();
                    } else {
                        return false;
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>
